import React from "react";
import "./TodoFooter.css";

export default function TodoFooter({ checkAllTodo, todos, batchRemoveTodos }) {
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={todos.every((item) => item.done) && todos.length > 0}
          onChange={(e) => {
            // console.log(e.target.checked);
            //批量更新任务的完成状态
            checkAllTodo(e.target.checked);
          }}
        />
      </label>
      <span>
        <span>已完成 {todos.filter(item => item.done).length}</span> / 全部 {todos.length}
      </span>
      <button className="btn btn-danger" onClick={() => {
        //批量的移除已完成任务
        batchRemoveTodos();
      }}>清除已完成任务</button>
    </div>
  );
}
